<template>
<div class="custom-tree-container">
  <div class="block">
    <el-tree
      :data="data"
      :props="defaultProps"
      node-key="id"
      icon-class=""
      :expand-on-click-node="false"
      :render-content="renderContent"
      >
    </el-tree>
    <input type="file" id="upload" @change="handleFileChange" ref="inputer" style="display:none" >
      <!-- style="display:none" -->

  </div>

</div>

</template>

<script>
import {getFileTree,download,downloadZip,del,uploadFile,fileSharing,fileCooperation,modifyName,mkdir,mkfile} from "@/api/filesys/myfiles";
export default {
  inputfile:"",
  created(){
    this.methodGetFileTree()
  },
  data() {
    return {
      data: [],
      defaultProps: {
        children: "child",
        label: "name",
      },
      // dialogVisible:false,
    };
  },

  methods: {
    methodGetFileTree() {
        getFileTree().then(res => {
            var fileTreeData=res.data.data
            this.data=fileTreeData
        });
      },
    fileClick(data) {
      this.inputfile = data.path;
      this.$refs.inputer.dispatchEvent(new MouseEvent('click'))
    },
    handleFileChange() {
      var self = this;
      let inputDOM = self.$refs.inputer;
      var file = inputDOM.files[0]; // 通过DOM取文件数据
      //  let size = Math.floor(file.size / 1024); //计算文件的大小　
      var formData = new FormData(); // new一个formData事件
      formData.append("file", file); // 将file属性添加到formData里
      formData.append("uploadPath", this.inputfile); // 将file属性添加到formData里
      uploadFile(formData).then(res => {
        this.methodGetFileTree()
        });
    },
    methodMkdir(data){
      this.$prompt('请输入文件夹名', '提示', {
        confirmButtonText: '确定',
      }).then(({ value }) => {
        mkdir(data.path,value).then(res =>{
          this.$message({
            type: 'success',
            message: '新建  '+value+'  文件夹成功'
          });
          this.methodGetFileTree()
        })
      })
    },
    methodMkfile(data){
      this.$prompt('请输入文件名', '提示', {
        confirmButtonText: '确定',
      }).then(({ value }) => {
        mkfile(data.path,value).then(res =>{
          this.$message({
            type: 'success',
            message: '新建  '+value+'  文件成功'
          });
          this.methodGetFileTree()
        })
      })
    },
    methodModifyName(data){
      this.$prompt('请输入文件名', '提示', {
        confirmButtonText: '确定',
      }).then(({ value }) => {
        modifyName(data.path,value).then(res =>{
          this.$message({
            type: 'success',
            message: '新建  '+value+'  文件成功'
          });
          this.methodGetFileTree()
        })
      })
    },
    methodDel(data){
      this.$confirm('此操作将永久删除  '+data.name+' 该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(_ => {
          del(data.path).then(res =>{
            this.methodGetFileTree()
          })
        })
        .catch(_ => {});
    },

   methodDownloadFile(data) {
      download(data.path).then(res => {
          const filename = res.headers["content-disposition"];
          const blob = new Blob([res.data]);
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob);//创建下载的链接
          downloadElement.href = href;
          downloadElement.download = decodeURIComponent(filename.split("filename=")[1]); //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href);    //释放掉blob对象
      });
    },
    methodDownloadZip(data) {
      downloadZip(data.path).then(res => {
          const filename = res.headers["content-disposition"];
          const blob = new Blob([res.data]);
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob);//创建下载的链接
          downloadElement.href = href;
          downloadElement.download = decodeURIComponent(filename.split("filename=")[1]); //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href);    //释放掉blob对象
      });
    },
    methodfileSharing(data) {
      this.$confirm("确认开启  "+data.name+"  资源的分享吗", '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
        center: true
      })
        .then(_ => {
          fileSharing(data.path).then(res =>{
            if (res.data.success){
              this.$alert('<strong>'+res.data.data+'</strong>', '提示', {
                dangerouslyUseHTMLString: true
              });
            } else{
              this.$message({
                type: 'error',
                message: res.data.data
              });
            }
          })
        })
        .catch(_ => {});
    },
    methodfileCooperation(data) {
      this.$confirm("确认开启  "+data.name+"  资源的协作吗")
        .then(_ => {
          fileCooperation(data.path).then(res =>{
            if (res.data.success){
              this.$alert('<strong>'+res.data.data+'</strong>', '提示', {
                dangerouslyUseHTMLString: true
              });
            } else{
              this.$message({
                type: 'error',
                message: res.data.data
              });
            }
          })
        })
        .catch(_ => {});
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },


      renderContent(h, { node, data, store }) {
        console.log(1111)
        console.log(data.type)
        if(data.type==0){
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
            <span>
               <el-link size="mini" type="primary" on-click={ () => this.methodMkfile(data) }>新建文件</el-link>&nbsp;&nbsp;&nbsp;
               <el-link size="mini" type="success" on-click={ () => this.methodMkdir(data) }>新建文件夹</el-link>&nbsp;&nbsp;&nbsp;
               <el-link size="mini" type="warning" on-click={ () => this.methodModifyName(data) }>修改文件夹名</el-link>&nbsp;&nbsp;&nbsp;
               <el-link size="mini" type="danger" on-click={ () => this.fileClick(data) }>上传</el-link>&nbsp;&nbsp;&nbsp;
               <el-link size="mini" type="danger" on-click={ () => this.methodDel(data) }>删除</el-link>&nbsp;&nbsp;&nbsp;
               <el-link size="mini" type="success" on-click={ () => this.methodDownloadZip(data) }>打包下载</el-link>&nbsp;&nbsp;&nbsp;
              <el-link size="mini" type="primary" on-click={ () => this.methodfileSharing(data) }>分享</el-link>&nbsp;&nbsp;&nbsp;
            </span>
          </span>);
        }
        else {
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
            <span>
                 <el-link size="mini" type="warning" on-click={ () => this.modifyName(data) }>修改文件名</el-link>&nbsp;&nbsp;&nbsp;
             <el-link size="mini" type="danger" on-click={ () => this.methodDel(data) }>删除</el-link>&nbsp;&nbsp;&nbsp;
              <el-link size="mini" type="danger" on-click={ () => this.methodDownloadFile(data) }>下载</el-link>&nbsp;&nbsp;&nbsp;
              <el-link size="mini" type="primary" on-click={ () => this.methodfileSharing(data) }>分享</el-link>&nbsp;&nbsp;&nbsp;
              <el-link size="mini" type="success" on-click={ () => this.methodfileCooperation(data) }>协作</el-link>&nbsp;&nbsp;&nbsp;
            </span>
          </span>);
        }

      }
  },
};
</script>

<style>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  /* 树形样式 */
.el-tree{
  padding: 0 0 0 20px;
}
.el-tree  .el-tree-node__expand-icon.expanded
{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.el-tree  .el-icon-caret-right:before
{
    background: url("~@/folder.png") no-repeat 0 3px;
    content: '';
    display: block;
    width: 30px;
    height: 20px;
    font-size: 16px;
    background-size: 16px;
}
.el-tree   .el-tree-node__expand-icon.expanded.el-icon-caret-right:before
{
    background: url("~@/file-expend.png") no-repeat 0 3px;
    content: '';
    display: block;
    width: 30px;
    height: 20px;
    font-size: 16px;
    background-size: 16px;
}
.el-tree   .is-leaf:before
{
    background: url("~@/file.png") no-repeat 0 3px;
    content: '';
    display: block;
    width: 30px;
    height: 20px;
    font-size: 16px;
    background-size: 16px;
}

.el-tree  .el-tree-node__label{
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
}


</style>
